﻿@model IEnumerable<Bk.Models.BlogInfo>

@{
    @ViewBag.Title
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/jQuery/jquery-3.4.1.min.js"></script>

    <style>
        /*背景图*/
        body {
            background-image: url('../Image/9.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }



        .* {
            margin: 0px auto;
            padding: 0px;
        }

        /* 重置按钮默认样式 */
        button {
            border: none; /* 去掉边框 */
            outline: none;
            cursor: pointer;
        }

        #newButton {
            /* 柔和的背景渐变，更贴合可能的淡雅背景风格 */
            background: linear-gradient(135deg, #e6e6fa 0%, #f8f8ff 100%);
            color: #333; /* 文字颜色 */
            padding: 10px 20px;
            border-radius: 20px; /* 更大的圆角，让按钮看起来更柔和 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 淡淡的阴影增加立体感 */
            transition: all 0.3s ease; /* 过渡效果 */
            position: relative;
            overflow: hidden;
        }

            #newButton::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 1;
            }

            #newButton:hover::before {
                opacity: 1;
            }

            #newButton:hover {
                transform: translateY(-3px); /* 鼠标悬停时稍微向上提升 */
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时加深阴影 */
            }

        #head {
            width: 100%;
            height: 10%;
        }
            /*大导航*/
            #head span img, input {
                margin-right: 2%;
            }

            #head span a {
                margin-left: 10%;
                font-size: 30px;
                text-decoration: none;
                color: black;
            }

        .row span img, input, a {
            float: left;
        }
        /*小导航*/
        .nav li {
            float: left;
            margin-right: 17%;
            list-style: none;
        }

        .nav li a {
            text-decoration: none;
            color: black;
        }

        .nav li a.active {
            color: #1976d2;
            font-weight: bold;
        }
        /*变化前*/

        .carousel {
            position: relative;
            max-width: 1000px;
            margin: 20px auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* 图片容器 */
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        /* 单张轮播项 */
        .carousel-item {
            min-width: 100%;
            height: 400px;
            position: relative;
        }

            /* 轮播图片 */
            .carousel-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        /* 导航按钮 */
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            color: white;
            padding: 15px;
            border: none;
            cursor: pointer;
            font-size: 24px;
            transition: 0.3s;
        }

            .carousel-control:hover {
                background: rgba(0,0,0,0.8);
            }

        .prev {
            left: 0;
            border-radius: 0 5px 5px 0;
        }

        .next {
            right: 0;
            border-radius: 5px 0 0 5px;
        }

        /* 指示点 */
        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }

            .indicator.active {
                background: white;
                transform: scale(1.2);
            }
        /*栅格*/
        .container {
            width: 100%;
            max-width: 1200px; /* 最大容器宽度 */
            margin: 0 auto; /* 居中 */
            padding: 0 15px; /* 左右留白 */
            box-sizing: border-box;
        }

        .row {
            display: grid;
            grid-template-columns: repeat(12, 1fr); /* 12列栅格 */
            gap: 20px; /* 列间距 */
            margin: 20px 0; /* 行间距 */
        }

        #fancyButton {
            padding: 8px 20px;
            font-size: 16px;
            border: none;
            border-radius: 15px;
            /* 采用和背景类似的淡蓝色系渐变，并且透明度稍作调整，让按钮更融合 */
            background: linear-gradient(135deg, rgba(138, 194, 221, 0.7), rgba(215, 238, 247, 0.7));
            color: #333;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
        }

            #fancyButton::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 1;
            }

            #fancyButton:hover::before {
                opacity: 1;
            }

            #fancyButton:hover {
                transform: translateY(-2px);
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
            }

        /* 通用列样式 */
        [class^="col-"] {
            grid-column-end: span 12; /* 默认占满整行 */
            box-sizing: border-box;
            padding: 15px;
            background-clip: content-box; /* 背景不延伸到padding */
        }

        /* 栅格列定义 */
        .col-1 {
            grid-column-end: span 1;
        }

        .col-2 {
            grid-column-end: span 2;
        }

        .col-3 {
            grid-column-end: span 3;
        }

        .col-4 {
            grid-column-end: span 4;
        }

        .col-5 {
            grid-column-end: span 5;
        }

        .col-6 {
            grid-column-end: span 6;
        }

        .col-7 {
            grid-column-end: span 7;
        }

        .col-8 {
            grid-column-end: span 8;
        }

        .col-9 {
            grid-column-end: span 9;
        }

        .col-10 {
            grid-column-end: span 10;
        }

        .col-11 {
            grid-column-end: span 11;
        }

        .col-12 {
            grid-column-end: span 12;
        }

        /* 响应式设计 */
        @@media (max-width: 1200px) {
            .container {
                max-width: 960px;
            }
        }

        @@media (max-width: 992px) {
            .container {
                max-width: 720px;
            }

            .right {
                width: 200px;
            }

            .nav li {
                margin-right: 14%;
            }
            /* 平板设备调整 */
            .col-md-1 {
                grid-column-end: span 1;
            }

            .col-md-2 {
                grid-column-end: span 2;
            }
            /* ... 其他列定义类似 */
            .col-md-12 {
                grid-column-end: span 12;
            }
        }

        @@media (max-width: 992px) {

            .container {
                max-width: 100%;
                padding: 0 10px;
            }
            /* 手机设备调整 */
            .row {
                grid-template-columns: 1fr; /* 单列布局 */
                gap: 15px;
            }

            [class^="col-"] {
                grid-column-end: span 1; /* 强制单列 */
            }
        }

        /* 可选：Flexbox备用方案（如需支持旧浏览器） */
        .flex-row {
            display: flex;
            flex-wrap: wrap;
            margin: -10px; /* 抵消子元素margin */
        }

        .flex-col {
            padding: 10px;
            box-sizing: border-box;
        }

        /* 其他辅助类 */
        .offset-1 {
            margin-left: 8.3333%;
        }

        .offset-2 {
            margin-left: 16.6666%;
        }

        .left {
            width: 4%;
        }

        .right {
            width: 608px;
            border-radius: 100px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="Box">
        <div class="row">
            <div id="head" class="col-12 col-md-6 col-lg-4">
                <span>
                    <img class="left" src="~/Image/logo.png" />
                    <input class="right" type="text" id="searchInput" name="searchTerm" placeholder="搜索文章..." />
                    <input type="button" id="fancyButton" name="name" value="搜索" onclick="performSearch()" />
                </span>
                <span>
                    <input id="fancyButton" type="button" name="name" value="个人" onclick="Usersinfo()" />
                    <a href="@Url.Action("Create","home")">创作⊕</a>
                </span>
            </div>
        </div>
    </div>

    <div class="center_one">
        <ul class="nav col-12 col-md-6 col-lg-4">
            <li><a href="javascript:void(0)" onclick="filterByCategory(0)" class="category-link" data-category="0">全部</a></li>
            <li><a href="javascript:void(0)" onclick="filterByCategory(1)" class="category-link" data-category="1">艺术</a></li>
            <li><a href="javascript:void(0)" onclick="filterByCategory(2)" class="category-link" data-category="2">文学</a></li>
            <li><a href="javascript:void(0)" onclick="filterByCategory(3)" class="category-link" data-category="3">体育</a></li>
            <li><a href="javascript:void(0)" onclick="filterByCategory(4)" class="category-link" data-category="4">生活</a></li>
        </ul>
    </div>
    <br />
    <div class="center_image col-12 col-md-12 col-lg-4">
        <!-- 轮播容器 -->
        <div class="carousel">
            <!-- 图片容器 -->
            <div class="carousel-inner">
                <!-- 轮播项 -->
                <div class="carousel-item active">
                    <img src="~/Image/Wx.jpg"  alt="Alternate Text"/>
                </div>
                <div class="carousel-item">
                    <img src="~/Image/Life.jpg" alt="Alternate Text" />
                </div>
                <div class="carousel-item">
                    <img src="~/Image/Pe.jpg" alt="Alternate Text" />
                </div>
                <div class="carousel-item">
                    <img src="~/Image/Wx.jpg" alt="Alternate Text" />
                </div>
            </div>

            <!-- 导航按钮 -->
            <button class="carousel-control prev">❮</button>
            <button class="carousel-control next">❯</button>

            <!-- 指示点 -->
            <div class="carousel-indicators">
                <button class="indicator active"></button>
                <button class="indicator"></button>
                <button class="indicator"></button>
            </div>
        </div>
    </div>
    <div class="container">
        <h2>博客文章</h2>
        <div id="blogPostsContainer">
            @foreach (var post in Model)
            {
                <div class="blog-post">
                    <h3>@post.title</h3>
                    <div class="post-meta">
                        <span class="post-category"> @post.categoriesName</span>
                        <span class="post-author"> @post.UserInfo.UserName</span>
                        <span class="post-date"> @post.PushDate</span>
                    </div>
                    <p>@post.Substance</p>
                    <!-- 点赞图标和计数 -->
                    <img class="like-container"
                         data-id="@post.BId"
                         src="~/Image/Like.png"
                         style="width:20px;">
                    <span id="likeCount@post.BId">@post.Likes</span>
                </div>
            }
        </div>
        <div id="loadingIndicator" style="display: none; text-align: center; padding: 20px;">
            <p>加载中...</p>
        </div>
    </div>
    <style>

        .container {
            max-width: 900px;
            margin: 40px auto;
        }

        .blog-post {
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s ease, background-color 0.3s ease;
            backdrop-filter: blur(5px);
        }

            .blog-post:hover {
                transform: translateY(-5px);
                background-color: rgba(255, 255, 255, 0.9);
            }

            .blog-post h3 {
                font-size: 24px;
                color: #2c3e50;
                margin-top: 0;
            }

        .post-meta {
            margin-bottom: 15px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
        }

        .post-author {
            color: #2c3e50;
            font-weight: 500;
        }

        .post-date {
            font-style: italic;
            color: #7f8c8d;
        }

        .post-category {
            font-weight: bold;
            color: #3498db;
            padding: 5px 10px;
            background-color: rgba(52, 152, 219, 0.1);
            border-radius: 5px;
            display: inline-block;
        }

        .blog-post p {
            line-height: 1.6;
        }

        .likes {
            color: #e74c3c;
            margin-top: 10px;
        }
    </style>
</body>
</html>
<script>
    // 轮播逻辑
    const carouselInner = document.querySelector('.carousel-inner');
    const items = document.querySelectorAll('.carousel-item');
    const indicators = document.querySelectorAll('.indicator');
    let currentIndex = 0;
    let autoPlay = true;
    let interval = 3000; // 自动播放间隔（3秒）

    // 切换轮播项
    function goToIndex(index) {
        if (index >= items.length) index = 0;
        if (index < 0) index = items.length - 1;

        carouselInner.style.transform = `translateX(-${index * 100}%)`;
        indicators.forEach(i => i.classList.remove('active'));
        indicators[index].classList.add('active');
        currentIndex = index;
    }

    // 自动播放
    let timer = setInterval(() => {
        if (autoPlay) goToIndex(currentIndex + 1);
    }, interval);

    // 按钮点击事件
    document.querySelector('.prev').addEventListener('click', () => {
        goToIndex(currentIndex - 1);
    });

    document.querySelector('.next').addEventListener('click', () => {
        goToIndex(currentIndex + 1);
    });

    // 指示点点击事件
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => goToIndex(index));
    });

    // 鼠标悬停暂停
    carouselInner.parentElement.addEventListener('mouseenter', () => {
        autoPlay = false;
    });

    carouselInner.parentElement.addEventListener('mouseleave', () => {
        autoPlay = true;
    });
    function Usersinfo() {
        var users ='@Url.Action("Person","Home")';
        window.location.href = users;
    }

    // 分类切换功能
    function filterByCategory(categoryId) {
        // 更新导航样式
        document.querySelectorAll('.category-link').forEach(link => {
            link.classList.remove('active');
        });
        document.querySelector(`[data-category="${categoryId}"]`).classList.add('active');

        // 显示加载指示器
        document.getElementById('loadingIndicator').style.display = 'block';
        document.getElementById('blogPostsContainer').style.display = 'none';

        // 发送AJAX请求
        $.ajax({
            url: '@Url.Action("GetPostsByCategory", "Default")',
            method: 'GET',
            data: { categoryId: categoryId },
            success: function(data) {
                // 更新内容
                document.getElementById('blogPostsContainer').innerHTML = data;
                document.getElementById('loadingIndicator').style.display = 'none';
                document.getElementById('blogPostsContainer').style.display = 'block';
                
                // 重新绑定点赞事件
                bindLikeEvents();
            },
            error: function(xhr, status, error) {
                console.error('加载分类内容失败:', error);
                document.getElementById('loadingIndicator').style.display = 'none';
                document.getElementById('blogPostsContainer').style.display = 'block';
                alert('加载内容失败，请重试');
            }
        });
    }

    // 重新绑定点赞事件
    function bindLikeEvents() {
        $('.like-container').off('click dblclick').on('click', function (e) {
            handleClick($(this));
        }).on('dblclick', function (e) {
            handleDblClick($(this));
        });
    }

    // 搜索功能
    function performSearch() {
        const searchTerm = document.getElementById('searchInput').value.trim();
        
        if (!searchTerm) {
            alert('请输入搜索关键词！');
            return;
        }

        // 显示加载指示器
        document.getElementById('loadingIndicator').style.display = 'block';
        document.getElementById('blogPostsContainer').style.display = 'none';

        // 发送AJAX搜索请求
        $.ajax({
            url: '@Url.Action("SearchPosts", "Default")',
            method: 'GET',
            data: { searchTerm: searchTerm },
            success: function(data) {
                // 更新内容
                document.getElementById('blogPostsContainer').innerHTML = data;
                document.getElementById('loadingIndicator').style.display = 'none';
                document.getElementById('blogPostsContainer').style.display = 'block';
                
                // 重新绑定点赞事件
                bindLikeEvents();
                
                // 清除分类选中状态
                document.querySelectorAll('.category-link').forEach(link => {
                    link.classList.remove('active');
                });
            },
            error: function(xhr, status, error) {
                console.error('搜索失败:', error);
                document.getElementById('loadingIndicator').style.display = 'none';
                document.getElementById('blogPostsContainer').style.display = 'block';
                alert('搜索失败，请重试');
            }
        });
    }
</script>
<script>
    $(document).ready(function () {
        // 初始化点赞事件绑定
        bindLikeEvents();
        
        // 设置默认选中"全部"分类
        document.querySelector('[data-category="0"]').classList.add('active');
        
        // 搜索框回车事件
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
    });

function handleClick(elem) {
   var bid = elem.data('id'); // 获取BId
    $.ajax({
        url: '@Url.Action("Increment", "Default")',
        method: 'POST',
        data: { id: bid }, // 传递BId到控制器
        success: function (result) {
            if (result.success) {
                // 更新点赞数：使用BId拼接元素ID
                $('#likeCount' + bid).text(result.count);
                // 可选动画
                $('#likeCount' + bid).addClass('animate-like').one('transitionend', function () {
                    $(this).removeClass('animate-like');
                });
            } else {
                alert(result.message);
            }
        },
        error: function (xhr, status, error) {
            console.error('AJAX错误:', status, error);
            alert('点赞失败，请重试');
        }
    });
}

function handleDblClick(elem) {
    $.ajax({
        url: '@Url.Action("Increment", "Default")',
        method: 'POST',
        data: { id: bid }, // 传递BId
        success: function (result) {
            if (result.success) {
                // 使用下划线拼接ID，与HTML中的ID一致（likeCount_1）
                var countElement = $('#likeCount_' + bid);
                countElement.text(result.count); // 更新点赞数
                countElement.addClass('animate-like').one('transitionend', function () {
                    $(this).removeClass('animate-like'); // 动画效果
                });
            } else {
                alert(result.message);
            }
        },
        error: function (xhr, status, error) {
            console.error('AJAX错误:', status, error);
            alert('点赞失败，请重试');
        }
    });
}
</script>